<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="addArticle">
    <div class="ui-block" th:each="article,articleState: ${articles}">
        <p class="d-none articleId" th:text="${article.article.articleId}"></p>
        <!-- Post -->
        <article class="hentry post">
            <div th:replace="~{profilePageCommon :: profilePagePostHeader}"></div>
            <h3 th:if="${article.article.articleTitle} ne null"  th:text="${article.article.articleTitle}"></h3>
            <a th:href="@{/read-article(uId=${article.article.userId},uName=${article.author.userName},
                            aId=${article.article.articleId},title='')}" style="color: black">
                <p th:text="${article.article.articleContent}" style="text-indent: 2em" class="article-content line-limit-length"></p>
            </a>
            <div class="row" th:if="${not #strings.isEmpty(article.article.imgPath)}">
                <div class="col-xs-6 col-md-3 mt-3" th:each="path : ${images[articleState.index]}">
                    <a href="javascript:void(0)" class="thumbnail">
                        <img th:src="${path}" class="card-img-top smallimg" alt="..."
                             style="height: 100%">
                    </a>
                </div>
            </div>

            <div class="post-additional-info inline-items">

                <a href="#" class="post-add-icon inline-items" onclick="giveLike(this);return false;">
                    <svg class="olymp-heart-icon">
                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                    </svg>
                    <span th:text="${article.likeCount}"></span>
                </a>
                <div class="likeRefresh">
                    <ul class="friends-harmonic" th:if="${article.likeUserList.size() > 0}">
                        <div>
                            <li th:if="${likeState.index <= 5}"
                                th:each="likeUser, likeState : ${article.likeUserList}">
                                <a href="#"
                                   th:href="@{/lookUserProfilePage(userName=${likeUser.userName})}">
                                    <img th:src="${likeUser.imagePath}" alt="friend">
                                </a>
                            </li>
                        </div>
                    </ul>

                    <div class="names-people-likes">
                        <div th:if="${article.likeUserList.size() > 0}">
                            <a href="#" th:text="${article.likeUserList.get(0).userName}"
                               th:href="@{/lookUserProfilePage(userName=${article.likeUserList.get(0).userName})}"></a>
                            and
                            <br><span th:text="${article.likeUserList.size()}"></span>
                            <span>more liked this</span>
                        </div>
                    </div>
                </div>

                <div class="comments-shared">
                    <a href="#" class="post-add-icon inline-items"
                       onclick="showPostComment(this);return false;">
                        <svg class="olymp-speech-balloon-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-speech-balloon-icon"></use>
                        </svg>
                        <span th:text="${article.commentCount}"></span>
                    </a>

                    <a href="#" class="post-add-icon inline-items">
                        <svg class="olymp-share-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-share-icon"></use>
                        </svg>
                        <span>24</span>
                    </a>
                </div>


            </div>
        </article>
        <!-- .. end Post -->
        <form class="comment-form inline-items d-none">
            <div class="post__author author vcard inline-items">
                <div th:if="${session.loginUser != null}">
                    <img th:src="${session.loginUser.imagePath}" alt="author">
                </div>
                <div class="form-group with-icon-right is-empty">
                    <textarea class="form-control" placeholder=""></textarea>
                    <div class="add-options-message">
                        <a href="#" class="options-message" data-toggle="modal"
                           data-target="#update-header-photo">
                            <svg class="olymp-camera-icon">
                                <use xlink:href="#olymp-camera-icon"></use>
                            </svg>
                        </a>
                    </div>
                    <span class="material-input"></span></div>
            </div>
            <button class="btn btn-md-2 btn-primary" onclick="postComment(this);return false;">
                发表评论
            </button>
            <button class="btn btn-md-2 btn-border-think c-grey btn-transparent custom-color"
                    onclick="hideComment(this);return false;">
                取消
            </button>
        </form>
    </div>
</div>
</body>
</html>